<template>
    <view class="edit-container">
        <view class="avatar" @tap="updateAvatar">
            <image class="img" :src="userMsg ? userMsg.avatarUrl : 'http://121.40.63.147:8081/avatar/default.jpg'"
                mode="aspectFill" />
            <text class="text">点击修改头像</text>
        </view>
        <view class="form">
            <view class="form-item">
                <text class="label">昵称</text>
                <input type="text" placeholder="请填写昵称" v-model="userMsg.nickname" />
            </view>
            <view class="form-item">
                <text class="label">性别</text>
                <radio-group @change="onGenderChange">
                    <label>
                        <radio class="radio" value="male" color="#625dad" :checked="userMsg?.gender === 'male'" />
                        男
                    </label>
                    <label>
                        <radio class="radio" value="female" color="#625dad" :checked="userMsg?.gender === 'female'" />
                        女
                    </label>
                </radio-group>
            </view>
            <!-- 点击保存//todo -->
        </view>
        <button class="form-button" @tap="saveUpdate">保 存</button>

    </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store';
import type { Gender, UserInfo } from '@/type/user';
import { API_getUserInfo, API_saveUserMsg, API_uploadAvatar } from '@/service/user'
const userStore = useUserStore();
const userMsg = ref<UserInfo>({ nickname: '' });
let tmpSrc = '';
//更改头像
const updateAvatar = () => {
    uni.chooseImage({
        count: 1, //默认9
        sourceType: ['album'], //从相册选择
        success: function (res) {
            userMsg.value.avatarUrl = res.tempFilePaths[0];
            tmpSrc = res.tempFilePaths[0];
        }
    });
}
//更改性别
const onGenderChange: UniHelper.RadioGroupOnChange = (e) => {
    userMsg.value!.gender = e.detail.value as Gender
}
//保存信息
const saveUpdate = async () => {
    //保存文字信息
    const res1 = await API_saveUserMsg(
        userMsg.value.nickname as string,
        userMsg.value.gender as Gender
    )
    //保存图片信息
    let res2 = false;
    if (tmpSrc) {
        const res = await API_uploadAvatar(tmpSrc);
        if (res.code) res2 = true;
    } else {
        //上传图片为空
        res2 = true;
    }
    if (res1.code && res2) {
        uni.showToast({ icon: 'success', title: '更新成功' })
        setTimeout(() => {
            uni.navigateBack();
        }, 500)
    } else {
        uni.showToast({ icon: 'error', title: '更新失败' })
    }
}
onMounted(async () => {
    let result = await API_getUserInfo();
    userMsg.value = result.data;
})
</script>
<style scoped lang="scss">
.edit-container {
    .avatar {
        background-color: $color-main;
        padding: 50rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
            width: 150rpx;
            height: 150rpx;
            border-radius: 50%;
        }

        .text {
            margin-top: 20rpx;
            color: #fff;
            font-size: 28rpx
        }
    }

    .form {
        background-color: #fff;
        border-radius: 15rpx;
        margin: 20rpx;
        padding: 0 20rpx;
        border-radius: 10rpx;

        &-item {
            display: flex;
            align-items: center;
            padding: 25rpx;
            font-size: 30rpx;
            border-bottom: 1rpx solid #ddd;

            .label {
                width: 150rpx;
            }

            .radio {
                transform: scale(0.7);
            }

            &:last-child {
                border: none;
            }
        }
    }

    .form-button {
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        margin: 30rpx 20rpx;
        color: #fff;
        border-radius: 80rpx;
        font-size: 30rpx;
        background-color: $color-main;
    }
}
</style>
